<template>
<!--
<div>
    <div v-for="item in JSON" :key="item.id">
        <p>{{ item.title }}</p>
        <p>{{ item.content }}</p>
    </div>
</div>-->

  <div class="container">
    <h2>光遇季节<br>____________________________</h2>
    <div class="desc">
    <ul>
    <li v-for="(item, index) in pwd2" :key="index"> 
        
          <img :src="getImgUrl(item.imgs)" alt="" >
          
          <span>{{ item.id }}</span>
         
     
    </li>
    </ul>
    </div>
  </div>



</template>

<script>
// import img from './a.png'
/*
import pwd from '../public/pwd.json';
//将json数据导入到data中，赋值给vue实例的JSON变量
export default {
    data() {
        return {
            JSON: pwd
        }
    }

}*/

import axios from 'axios'


export default {
  data () {
    return {
      pwd2: null,
      
    //   url: require('../assets/img/' + ''),
/*
      img:[
        
            new URL('./assets/img/c.jpg', import.meta.url).href,
            new URL('./assets/img/b.jpg', import.meta.url).href
            ]*/
    }
  },
  //组件创建完成后执行,挂载完毕
  mounted () {
    axios.get('../public/pwd2.json')
      .then(response => {
        this.pwd2 = response.data
      })
      .catch(error => {
        console.log(error)
      })
      console.log('挂载完毕')
  },
  methods: {
    //定义方法，用于获取图片路径，不能用require,因为版本问题
    getImgUrl: function (imgs) {
        //用相对路径
        return new URL('../assets/img/' + imgs, import.meta.url).href
  }
}
}


</script>

<style scoped>
h2{
	font-family: "华文琥珀";
	font-size: 40px;
	color: #FF6600;
}




span{
        font-size: 20px;
        font-family: 隶书;
        color: #333333;
        margin-top: 10px;
        align-self: left;
        float: right;

        width: 400px;
        height: 140px;
    }
.desc ul{
    display: flex;/*设置ul为flex布局*/
    flex-wrap: wrap;
    justify-content: space-between;
}
.desc li{
    list-style: none;
    margin-bottom: 20rpx;
    position: relative;
    width: 630px;
    height: 160px;
    font-size: 0px;
    
}
img{
    width: 200px;
    height: 150px;
    margin-bottom: 10px;/*图片间距*/
}


</style>